import { type SlateElementProps, type TEquationElement } from "platejs";

import { getEquationHtml } from "@platejs/math";
import { RadicalIcon } from "lucide-react";
import { SlateElement } from "platejs";

import { cn } from "@/lib/utils";

export function EquationElementStatic(
  props: SlateElementProps&lt;TEquationElement&gt;,
) {
  const { element } = props;

  const html = getEquationHtml({
    element,
    options: {
      displayMode: true,
      errorColor: "#cc0000",
      fleqn: false,
      leqno: false,
      macros: { "\\f": "#1f(#2)" },
      output: "htmlAndMathml",
      strict: "warn",
      throwOnError: false,
      trust: false,
    },
  });

  return (
    &lt;SlateElement className="my-1" {...props}&gt;
      <div data-selected="true]:bg-primary/10&quot;,">
        {element.texExpression.length &gt; 0 ? (
          <span />
        ) : (
          <div>
            &lt;RadicalIcon className="size-6 text-muted-foreground/80" /&gt;
            <div>Add a Tex equation</div>
          </div>
        )}
      </div>
      {props.children}
    &lt;/SlateElement&gt;
  );
}

export function InlineEquationElementStatic(
  props: SlateElementProps&lt;TEquationElement&gt;,
) {
  const html = getEquationHtml({
    element: props.element,
    options: {
      displayMode: true,
      errorColor: "#cc0000",
      fleqn: false,
      leqno: false,
      macros: { "\\f": "#1f(#2)" },
      output: "htmlAndMathml",
      strict: "warn",
      throwOnError: false,
      trust: false,
    },
  });

  return (
    &lt;SlateElement
      {...props}
      className="inline-block select-none rounded-sm [&_.katex-display]:my-0"
    &gt;
      <div>
        <span />
      </div>
      {props.children}
    &lt;/SlateElement&gt;
  );
}
